Draw.io でフローチャートを書いてみよう！
お絵かき大好き、かめです。
あまり上手くはないのですが、最近は画用紙などに落書きして娘のおもちゃを作るのにハマっています。
はじめに
先日、 手順書を書くときに気をつけていること | DevelopersIO でも書きましたが、私は手順書を作成する際になるべくフロー図を書くようにしています。
前職では、フローといえば Visio を使っていたのですが、弊社では Visio を採用していないので、似た操作感のツールを探し、 Draw.io にたどり着きました。
今回はこちらをご紹介します。
Draw.io とは
弊社ブログ エンジニアのための無料で使えるドローイングツールまとめ | DevelopersIO などでも簡単に紹介されていますが、 Draw.io にアクセスするだけで利用できる無料のお絵かきツールです。
魅力1：豊富なテンプレート
フローチャートだけでなく、ネットワーク図や ER 図など豊富なテンプレートがあります。
魅力2：豊富なエクスポート形式
PNG や JPEG だけでなく、 SVG や XML など様々な形式でエクスポートできます。
魅力3：豊富な連携先
ローカル以外に Google ドライブや GitHub との連携もできるので、チームでの利用もしやすそうです。
魅力4： Visio に近い操作感
Visio に比べると若干のもっさり感や、えーそこに接続されちゃうの？というところもありますが、シェイプにマウスオーバーすると四方に矢印が出てくるので、簡単にフローを書くことができます。
↑で矢印をクリックすると…↓のようにシェイプが追加されます。
また、 Lane3 を広げると、下図のように Lane2 、 Lane4 の内容が崩れることなく一緒に移動します。
使い方
- Draw.io にアクセスします
- 「新規」、または「既存」を選択します（言語が日本語になっていない場合は、言語を選択し、再読み込みします）
- （「新規」を選択した場合）テンプレートを選択します
- 左上の「名称未設定ファイル .drawio 」をクリックし、ファイル名を編集します
- 心ゆくまでお絵かきします（オンラインツールなので、こまめな保存推奨です）
- ツールバーの「ファイル」から任意の形式、場所に保存やエクスポートをします（下図は、「名前をつけて保存」の例です）
おわりに
今回は、 Draw.io について、私が魅力だと思った点や簡単な使い方をご紹介しました。
現在、私のチームでは運用手順などのドキュメントを GitHub 上で管理し、プルリクでのレビューなどをしていこうと検討しているので、 GitHub と絡めたよさげな運用方法が見つかったら、改めて活用例をご紹介します。
